<!--
 * 底部导航
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-tabbar" :class="classes" :style="styles">
        <slot></slot>
    </view>
</template>

<script>
    import props from "./props.js";
    import { computed } from "vue";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: ["change", "asyncChange"],
        computed: {
            // classes
            classes() {
                const classes = [];

                // 安全底部
                if (this.safeBottom) classes.push("pure-tabbar-safe-bottom");

                return classes;
            },

            // styles
            styles() {
                const styles = [];

                // 默认颜色
                if (this.color) styles.push(`--pure-tabbar-color: ${this.color}`);

                // 激活颜色
                if (this.activeColor) styles.push(`--pure-tabbar-active-color: ${this.activeColor}`);

                // 图标大小
                if (this.iconSize) styles.push(`--pure-tabbar-icon-font-size: ${this.iconSize}`);

                // 文字大小
                if (this.textSize) styles.push(`--pure-tabbar-text-font-size: ${this.textSize}`);

                // 边框颜色
                if (this.borderColor) styles.push(`--pure-tabbar-border-top-color: ${this.borderColor}`);

                return styles;
            },
        },
        methods: {
            // 点击事件
            tabClick(tab) {
                // 异步切换
                if (this.async) {
                    this.$emit("asyncChange", tab);
                    return;
                }

                // 拦截函数
                if (typeof this.beforeChange === "function") {
                    // 返回值
                    const result = this.beforeChange(tab);

                    // 返回值是 Boolean 类型
                    if (typeof result === "boolean") {
                        // 返回 true 时，切换
                        if (result) {
                            uni.switchTab({
                                url: tab[this.pathKey]?.startsWith("/") ? tab[this.pathKey] : `/${tab[this.pathKey]}`,
                                success: () => {
                                    this.$emit("change", tab);
                                },
                            });
                        }
                        return;
                    }

                    // 返回值是 Promise 类型
                    if (result instanceof Promise) {
                        // Promise.then 时，切换
                        result.then(() => {
                            uni.switchTab({
                                url: tab[this.pathKey]?.startsWith("/") ? tab[this.pathKey] : `/${tab[this.pathKey]}`,
                                success: () => {
                                    this.$emit("change", tab);
                                },
                            });
                        });
                        return;
                    }
                }
            },
        },
        provide() {
            return {
                globalHoverClass: computed(() => this.hoverClass),
                activeValue: computed(() => this.activeValue),
                valueKey: computed(() => this.valueKey),
                tabClick: this.tabClick,
                iconMode: computed(() => this.iconMode),
            };
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
